import { Icon, Tooltip } from 'antd';
import _ from 'lodash';

const UnitMachines = ({ machines, onRefreshMachineStatus }) => {
  if (_.isEmpty(machines)) {
    return (
      <ul className='unit-machines'>
        <li className='unit-machine'>
          <div><span className='machine-icon'><Icon type='hdd'/></span><span className='machine-ip'>未分配任何机器</span></div>
        </li>
      </ul>
    );
  }

  return (
    <ul className='unit-machines'>
      {machines.map(({ id, ip, imageName, imageStatus }) => {
        let statusClass;
        switch (imageStatus) {
          case 'RUNNING':
            statusClass = 'color-success';
            break;
          case 'EXITED':
            statusClass = 'color-warning';
            break;
          case 'REQUEST_ERROR':
            statusClass = 'color-danger';
            break;
          default:
            statusClass = 'color-info';
        }
        let imageTag;
        switch (imageStatus) {
          case 'RUNNING':
          case 'EXITED':
            imageTag = (
              <Tooltip title={`Container Image ：${imageName}`}>
                <span>{`...${imageName.substring(imageName.length - 10, imageName.length)}`}</span>
              </Tooltip>
            );
            break;
          case undefined:
          case 'NOT_FOUND':
            imageTag = (
              <Tooltip title='未找到任何运行单元相关容器运行情况，请部署运行单元'>
                <span>未找到对应容器</span>
              </Tooltip>
            );
            break;
          case 'REQUEST_ERROR':
            imageTag = (
              <Tooltip title='获取状态失败，可能是请求超时，机器网络不通'>
                <span>获取状态失败</span>
              </Tooltip>
            );
            break;
          default:
        }
        return (
          <li key={id} className='unit-machine'>
            <div><span className={`machine-icon ${statusClass}`}><Icon type='hdd'/></span><span className='machine-ip'>{ip}</span></div>
            <div><span className='machine-image'>{imageTag}</span></div>
          </li>
        );
      })}
      <li className='unit-machines-refresh'>
        <a onClick={onRefreshMachineStatus}><Icon type='reload'/> 刷新全部运行状态</a>
      </li>
    </ul>
  );
};

export default UnitMachines;
